<template>
  <div class="container">
    <el-card>
      <div class="top">
        <el-select v-model="evaluationType" class="select" placeholder="评教类型" size="large">
          <el-option v-for="item in evaluationTypes" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-select
          v-model="courseId"
          class="select"
          placeholder="课程"
          filterable
          clearable
          size="large"
          @change="getTeacher"
        >
          <el-option v-for="item in courseList" :key="item.subId" :label="item.subName" :value="item.subId" />
        </el-select>

        <el-select
          v-model="teacherId"
          class="select"
          placeholder="教师"
          filterable
          clearable
          size="large"
        >
          <el-option
            v-for="item in teacherList"
            :key="item.teacherId"
            :label="item.teacherName"
            :value="item.teacherId"
          />
        </el-select>
        <el-button type="primary" round @click="analyse">开始分析</el-button>
      </div>
    </el-card>
    <el-card v-show="visible" class="main">
      <template #header>
        <div class="card-header">
          <span>信度分析 —— Cronbach α系数：{{ resData.alpha }}</span>
          <div>
            <span>delta：</span>
            <el-select
              v-model="delta"
              class="select"
              size="small"
              @change="deltaChange"
            >
              <el-option
                v-for="d in deltas"
                :key="d"
                :label="d"
                :value="d"
              />
            </el-select>
          </div>
        </div>
      </template>
      <el-table :data="resData.tableData" border style="width: 100%">
        <el-table-column prop="itemDescription" label="名称" />
        <el-table-column prop="correlation" label="校正项总计相关性(CITC)" />
        <el-table-column prop="removedAlpha" label="项已删除的α系数" />
      </el-table>
      <div class="text">
        <h3>说明<i class="el-icon-info" style="margin-left: 10px;" /></h3>
        信度分析用于研究定量数据（尤其是态度量表题）的回答可靠准确性；<br>
        第一：首先分析α系数，如果此值高于0.8，则说明信度高；如果此值介于0.7~0.8之间，则说明信度较好;如果此值介于0.6~0.7，则说明信度可接受；如果此值小于0.6，说明信度不佳；<br>
        第二：如果CITC值低于0.3，可考虑将该项进行删除；<br>
        第三：如果“项已删除的α系数”值明显高于α系数，此时可考虑对将该项进行删除后重新分析；<br>
        第四：对分析进行总结。<br><br>
        从上表可知：信度系数值为{{ resData.alpha }}<span v-show="resData.alpha < 0.6"> &lt;= 0.6。因而说明研究数据信度质量比较糟糕。</span>
        <span v-show="resData.alpha >= 0.6"> &ge; 0.6。因而说明研究数据信度水平达标。</span>
        <span v-for="(row, idx) in resData.tableData" :key="idx">
          <span v-show="row.correlation < 0.3">
            {{ row.itemDescription }}的校正项总计相关性(CITC)小于0.3，可以考虑删除该项。
          </span>
          <span v-show="row.removedAlpha > resData.alpha">
            {{ row.itemDescription }}的项已删除的α系数大于Cronbach α系数，可以考虑删除该项。
          </span>
        </span>
      </div>
      <!-- 图表 -->
      <div ref="chartRef" class="chart" />
    </el-card>
  </div>
</template>

<script>
import { reliability } from '@/api/evaluation'
import { getCourseList, getTeacherList } from '@/api/grades'
import { Message } from 'element-ui'
import * as echarts from 'echarts'
export default {
  name: 'Reliability',
  data() {
    return {
      evaluationType: '1',
      evaluationTypes: [{
        label: '学生评教',
        value: '1'
      }, {
        label: '督导评教',
        value: '2'
      }],
      courseId: '',
      courseList: [],
      teacherId: '',
      teacherList: [],
      resData: {},
      allData: [], // 所有原始数据
      visible: false,
      delta: 0,
      deltas: [0, 0.03, 0.05, 0.1, 0.15]
    }
  },
  mounted() {
    // 查询课程
    getCourseList(this.courseId).then(res => {
      this.courseList = res.data
    })
  },
  methods: {
    getTeacher() {
      this.teacherId = ''
      this.visible = false
      if (this.courseId === '') {
        return
      }
      getTeacherList(this.courseId).then(res => {
        this.teacherList = res.data
      })
    },
    analyse() {
      if (this.courseId === '') {
        Message({
          message: '请选择参数',
          type: 'warning',
          duration: 2000
        })
        return
      }
      reliability(this.evaluationType, this.courseId, this.teacherId).then(res => {
        this.resData = {} // 清空数据
        const data = res.data
        console.log('信度分析：', data)
        if (data === null) {
          Message({
            message: '没有数据',
            type: 'warning',
            duration: 2000
          })
          this.visible = false
          return
        }
        this.resData.alpha = data[0].alpha
        this.resData.tableData = data[0].reliabilityItemVOList
        this.allData = data
        this.drawChart()
        this.visible = true
      })
    },
    deltaChange(val) {
      this.resData = {}
      const idx = this.deltas.indexOf(val)
      this.resData.alpha = this.allData[idx].alpha
      this.resData.tableData = this.allData[idx].reliabilityItemVOList
    },
    drawChart() {
      const value = []
      this.allData.forEach(element => {
        value.push(element.alpha)
      })
      const chart = echarts.init(this.$refs.chartRef)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.deltas
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: value,
            type: 'line'
          }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;

  .top {
    display: flex;
    gap: 30px;
    .select {
      // margin-right: 30px;
    }
  }

  .main {
    margin-top: 30px;

    .text {
      margin: 30px 0 30px;
      background-color: #F3F9FE;
      padding: 10px;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
    }

    .chart {
      width: 800px;
      height: 600px;
      margin: 0 auto;
    }
  }
}
</style>
